<template>
  <div class="spall">
    <el-form ref="from" label-width="100px" :model="form" :inline="inline">
      <el-form-item v-for="item in formLabel" :key="item.label" :label="item.label" prop="name">
        <el-input v-if="item.type === 'input'" :placeholder="'请输入' + item.label" v-model="form[item.model]">
        </el-input>
        <el-select v-if="item.type === 'select'" placeholder="请选择" v-model="form[item.model]">
          <el-option v-for="item in item.opts" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-input v-if="item.type === 'textarea'" type="textarea" clearable v-model="form[item.model]"></el-input>

        <el-upload v-if="item.type === 'upload'" action="http://localhost:8666/common/upload"
                   list-type="picture-card" :show-file-list="false"
                   :on-success="handleAvatarSuccess" :on-change="onChange">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img v-if="imageUrl" width="100%" class="avatar" alt="" :src="imageUrl">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-dialog>

        <!-- <el-upload v-if="item.type==='upload'"
                        class="avatar-uploader"
                        action="http://localhost:9000/common/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :on-change="onChange"
                        ref="upload"
                      >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload> -->


      </el-form-item>
      <el-form-item>
        <slot></slot>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'CommonForm',
  props: {
    formLabel: Array,
    form: Object,
    inline: Boolean,
  },
  data() {
    return {
      imageUrl: '',
      dialogVisible: false,
      // rules: {
      //     name: [{ required: true, message: '请输入信息', trigger: 'blur' },],
      // }
    }
  },
  methods: {
    handleAvatarSuccess(response, file, fileList) {
      this.imageUrl = `http://localhost:9000/common/download?name=${response.data}`
      this.form.image = response.data
    },
    onChange(file) {
      if (file) {
        const suffix = file.name.split('.')[1]
        const size = file.size / 1024 / 1024 < 2
        if (['png', 'jpeg', 'jpg'].indexOf(suffix) < 0) {
          this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')
          this.$refs.upload.clearFiles()
          return false
        }
        if (!size) {
          this.$message.error('上传文件大小不能超过 2MB!')
          return false
        }
        return file
      }
    }
  }
}
</script>

<style scoped>
.el-form-item {
  margin-right: 30px;
}

.uploadImg .el-form-item__label::before {
  content: '*';
  color: #F56C6C;
  margin-right: 4px;
}

.spall {
  padding-left: 50px;
}
</style>
